<template>
  <view>
    <view class="list">
      <view class="card" v-for="i in 3" :key="i">
        <view class="block">
          <view class="flex-row justify-between align-center u-line-1 u-p-8" style="width: 560rpx;">
            <view class="name">张飞</view>
            <view class="phone">15516441644</view>
          </view>
          <view class="flex-row f-center" style="width: 80rpx;">
            <image class="icon" src="../../../static/icons/bianji.png" mode=""></image>
          </view>
        </view>
        
        <view class="block">
          <view class="flex-row" style="width: 560rpx;">
            <image class="icon" src="../../../static/icons/weizhi.png" mode=""></image>
            <view class="address u-line-2" style="width: 506rpx;">
              河南省郑州市河南省郑州市河南省郑州市河南省郑州市河南省郑州市河南省郑州市河南省郑州市
            </view>
          </view>
        </view>

        <view class="btn-del">
          删除
        </view>
      </view>
    </view>

    <view class="btn-add" @click="$goto('/pages/mine/address/add')">
      <u-icon name="plus" color="#fff" size="32" class="u-m-r-8"></u-icon>
      <text>新增收货地址</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style lang="scss">
  page {
    background: #f5f5f5;
    padding-bottom: 90rpx;
  }

  .list {
    padding: 24rpx;
  }

  .card {
    width: 100%;
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    position: relative;
    margin-bottom: 40rpx;
    
    .block {
      padding: 16rpx 24rpx;
      background: #fff;
      position: relative;
      border-radius: 24rpx;
      margin-bottom: -16rpx;
      z-index: 9;
      display: flex;
      justify-content: space-between;
    }
    
    .name, .phone {
      font-size: 30rpx;
    }
    
    .address {
      font-size: 26rpx;
      line-height: 44rpx;
      color: #C3C3C3;
    }
    
    .icon {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .btn-del {
    width: 100%;
    height: 90rpx;
    padding-top: 16rpx;
    background: #ffb849;
    color: #fff;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 8;
  }

  .btn-add {
    width: 750rpx;
    height: 90rpx;
    background: #FFB849;
    color: #fff;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
  }
</style>
